<!--
 * @Descripttion:
 * @Author: caijj
 * @Date: 2020-12-03 15:14:53
 * @LastEditors: caijj
 * @LastEditTime: 2020-12-08 09:38:48
 * @FilePath: \secp-comc-web-new\src\App.vue
-->
<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
import { detectZoom } from '@/utils/tools';
import { debounce } from 'lodash';

export default {
  name: 'App',
  data() {
    true;
    return {
      searchPanel: {
        random: Math.random(),
        collapse: true, // 是否收起面板
        colSpan: 4 // 栅格布局全局默认是4
      },
      tableHeight: 716 // 定义表格高度
    };
  },
  computed: {
  },
  provide() {
    return {
      getTableHeight: () => this.tableHeight,
      getSearchPanel: () => this.searchPanel,
      countTableHeght: this.countTableHeght
    };
  },
  created() {
    window.addEventListener('resize', () => this.onResize({ that: this }));
  },
  mounted() {
    this.onResize({ that: this });
  },
  beforeDestroy() {
    window.removeEventListener('resize', () => this.onResize({ that: this }));
  },
  methods: {
    onResize: debounce(({ that }) => {
      const rate = detectZoom();
      /* 提示语 */
      // const isMac = /macintosh|mac os x/i.test(navigator.userAgent); // Mac默认缩放值为200，windows默认为100，需要分开判断
      that.searchPanel.random = Math.random();
      if (rate !== 100) {
        that.searchPanel.collapse = false;
        that.searchPanel.colSpan = 6;
        // 目前只能提示让用户如果想使用100%的比例手动去触发按ctrl+0
        // that.$notify({
        //   title: '温馨提示：',
        //   message: `
        //       当前您的页面缩放比例为:${rate}%,
        //       您可以按键盘“ctrl + 0” 或者 “ctrl + 鼠标滚轮上下”
        //       调整恢复显示标准，以防页面显示错乱！
        //     `
        // });
        return;
      }
      that.searchPanel.collapse = true;
      that.searchPanel.colSpan = 4;
    }, 500),
    countTableHeght(offsetTop) {
      const fixedHeight = 90; // 布局样式的固定高
      this.tableHeight = window.innerHeight - offsetTop - fixedHeight;
    }
  }
};
</script>

<style lang="scss">
body {
  .ant-calendar-week-number .ant-calendar-body tr.ant-calendar-active-week {
    font-weight: normal;
    background: inherit;
  }
  .week-picker .ant-calendar-picker-input.ant-input {
    cursor: pointer;
  }
  .el-form-item__label,
  .el-table thead {
    color: #333;
  }
  .el-table thead.is-group th {
    background: #fbfbfb;
  }
  .el-table--border,
  .el-table--group {
    border: 1px solid #eee;
  }
  .el-table--medium td,
  .el-table--medium th {
    padding: 5px 0;
  }
  .el-input--small {
    font-size: 14px;
  }
  .el-input__inner::placeholder {
    color: #606266;
  }
  .el-input__inner::-webkit-input-placeholder {
    color: #606266;
  }
  .el-select__input{
    margin-left: 10px;
  }
  // .el-input--small .el-input__inner {
  //   height: 30px !important;
  //   line-height: 30px;
  // }
  // .el-form-item--small .el-form-item__label {
  //   line-height: 30px;
  // }
}
</style>
